<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 * WYMeditor : what you see is What You Mean web-based editor
 * Copyright (c) 2005 - 2012 Jean-Francois Hovinne, http://www.wymeditor.org/
 * Dual licensed under the MIT (MIT-license.txt)
 * and GPL (GPL-license.txt) licenses.
 *
 * For further information visit:
 *        http://www.wymeditor.org/
 *
 * File Name:
 *        15-rdfa-editor.html
 *        RDFa editor implementation example page.
 *        See the documentation for more info.
 *
 * File Authors:
 *        Jean-Francois Hovinne (jf.hovinne a-t wymeditor dotorg)
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>RDFa editor</title>
        <style type="text/css">
            /* visual feedback */
            .about         { background-color: #f99; }
            .dc_creator    { background-color: #9f9; }
            .dc_title      { background-color: #9ff; }
            .foaf_Person   { background-color: #69c; }
            .foaf_name     { background-color: #99c; }
            .foaf_homepage { background-color: #c9c; }
            .foaf_mbox     { background-color: #c6c; }
            .foaf_phone    { background-color: #c3c; }
        </style>
        <script type="text/javascript" src="../jquery/jquery.js"></script>
        <script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>

        <script type="text/javascript">

            /*EXTEND THE XHTML PARSER*/
            /*************************/

            //Add the RDFa attributes
            WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
                    'rel',
                    'rev',
                    'content',
                    'href',
                    'src',
                    'about',
                    'property',
                    'resource',
                    'datatype',
                    'typeof');

            //Add the 'standard' vocabularies
            WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
                    'xmlns:biblio',
                    'xmlns:cc',
                    'xmlns:dbp',
                    'xmlns:dbr',
                    'xmlns:dc',
                    'xmlns:ex',
                    'xmlns:foaf',
                    'xmlns:rdf',
                    'xmlns:rdfs',
                    'xmlns:taxo',
                    'xmlns:xhv',
                    'xmlns:xsd');

            //Overwrite the <a> attributes 'rel' and 'rev'
            WYMeditor.XhtmlValidator._tags['a'] = {
                "attributes": {
                    "0": "charset",
                    "1": "coords",
                    "2": "href",
                    "3": "hreflang",
                    "4": "name",
                    "5": "rel",
                    "6": "rev",
                    "shape": /^(rect|rectangle|circ|circle|poly|polygon)$/,
                    "7": "type"
                }
            };

            /*END EXTEND*/
            /************/

            jQuery(function() {

                jQuery('.wymeditor').wymeditor({
                    stylesheet: 'wym_stylesheet.css',
                    html: '<h2 class="dc_title" property="dc:title">The trouble with Bob<\/h2><h3 class="dc_creator" property="dc:creator">Alice<\/h3>'
                            + '<p>The trouble with Bob is that he takes much better photos than I do.<\/p>'
                            + '<p class="foaf_Person" typeof="foaf:Person">'
                            + '<strong class="foaf_name" property="foaf:name">Alice Birpemswick<\/strong><br \/>'
                            + 'Email: <a class="foaf_mbox" rel="foaf:mbox" href="mailto:alice@example.com">alice@example.com<\/a><br \/>'
                            + 'Phone: <a class="foaf_phone" rel="foaf:phone" href="tel:+1-617-555-7332">+1 617.555.7332<\/a>'
                            + '<\/p>',
                    postInit: function(wym) {

                        //set the classes panel as dropdown
                        jQuery(wym._box).find('div.wym_classes').hide();

                        //construct the panel
                        jQuery(wym._box).find('div.wym_area_right')
                                .append('<div class="wym_attributes wym_section wym_panel"><\/div>')
                                .children(':last')
                                .append('<h2>Attributes<\/h2>')
                                .append('<ul><\/ul>')
                                .children(':last')
                                //store the attribute name/value in the button class (better idea?)
                                .append('<li><a class="about" title="What the data is about." href="#">ABOUT: about #value#<\/a><\/li>')
                                .append('<li><a class="property dc_title" title="A name by which the resource is formally known." href="#">TITLE: prop dc:title<\/a><\/li>')
                                .append('<li><a class="property dc_creator" title="An entity primarily responsible for making the resource." href="#">CREATOR: prop dc:creator<\/a><\/li>')
                                .append('<li><a class="typeof foaf_Person" title="A person." href="#">PERSON: typeof foaf:Person<\/a><\/li>')
                                .append('<li><a class="property foaf_name" title="A name for some thing." href="#">NAME: property foaf:name<\/a><\/li>')
                                .append('<li><a class="rel foaf_homepage" title="A homepage for some thing." href="#">HOMEPAGE: rel foaf:homepage<\/a><\/li>')
                                .append('<li><a class="rel foaf_mbox" title="A personal mailbox." href="#">MAILBOX: rel foaf:mbox<\/a><\/li>')
                                .append('<li><a class="rel foaf_phone" title="A phone." href="#">PHONE: rel foaf:phone<\/a><\/li>')
                                .find('a')
                                //event handlers
                                .click(function() {

                            //init
                            var selected = wym.selected(), //selected container
                                    classes = jQuery(this).attr('class').split(' '), //clicked button classes
                                    attrName = classes[0], //attribute name, e.g. 'property'
                                    attrValue = classes.length > 1 ? classes[1] : null; //attribute value, if available, e.g. dc_title

                            //the attribute already exists, remove it
                            if (jQuery(selected).attr(attrName) != undefined && jQuery(selected).attr(attrName) != '') {
                                WYMeditor.console.log('attribute already exists, remove it:', attrName, jQuery(selected).attr(attrName));
                                if (classes.length == 1 || jQuery(selected).attr(attrName) == attrValue.replace('_', ':'))
                                    jQuery(selected).removeAttr(attrName).removeClass(attrName).removeClass(attrValue);

                                //else, add it (and the feedback class)
                            } else {
                                WYMeditor.console.log('attribute does not exist, add it:', attrName, attrValue);
                                if (classes.length > 1) { //value available
                                    jQuery(selected).attr(attrName, attrValue.replace('_', ':')).addClass(attrValue);
                                } else { //value not available
                                    attrValue = prompt('Value', '');
                                    if (attrValue != null)
                                        jQuery(selected).attr(attrName, attrValue).addClass(attrName);
                                }
                            }
                        });

                        //feedback css
                        var rules = [
                            {name: '.about',
                                css: 'background-color: #f99;'},
                            {name: '.dc_creator',
                                css: 'background-color: #9f9;'},
                            {name: '.dc_title',
                                css: 'background-color: #9ff;'},
                            {name: '.foaf_Person',
                                css: 'background-color: #69c;'},
                            {name: '.foaf_name',
                                css: 'background-color: #99c;'},
                            {name: '.foaf_homepage',
                                css: 'background-color: #c9c;'},
                            {name: '.foaf_mbox',
                                css: 'background-color: #c6c;'},
                            {name: '.foaf_phone',
                                css: 'background-color: #c3c;'}
                        ];
                        wym.addCssRules(wym._doc, rules);
                    }
                });
            });

        </script>

    </head>

    <body>
        <h1>WYMeditor based RDFa editor (proof of concept)</h1>
        <p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
        <p>More information on the forum: <a href="http://forum.wymeditor.org/forum/viewtopic.php?f=3&amp;p=2030">WYMeditor for RDFa</a></p>
        <form method="post" action="">
            <textarea class="wymeditor"></textarea>
            <input type="submit" class="wymupdate" />
        </form>

    </body>

</html>
